<template>
<div class="clean1">
<div class="check4" style="background-color: #ffffff">
    <div class="searchArea">
        <form action="###" class="searchForm">
          <input
            type="text"
            placeholder="输入关键词"
            v-model="keywords"
          />
          <button
            class="sui-btn btn-xlarge btn-danger"
            type="button"
            @click="goSearch"
          >
            搜索
          </button>
          <el-button @click="delay" style="margin-left:10px">取消</el-button>
        </form>
    </div>
     <el-table class="table3"   :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%" max-height="500">
           <el-table-column fixed prop="positions_location" label="仓库名" width="100">
      </el-table-column>
      <el-table-column prop="goods_category" label="货物类别" width="100">
      </el-table-column>
      <el-table-column prop="temperature" label="温度(℃)" width="100">
      </el-table-column>
      <el-table-column prop="gas_concentration" label="CO₂浓度(%)" width="140">
      </el-table-column>
      <el-table-column prop="humidity" label="湿度(%)" width="100">
      </el-table-column>
      <el-table-column prop="goods_status" label="货物状态" width="100">
      </el-table-column>
      <el-table-column prop="health_situation" label="卫生情况" width="100">
      </el-table-column>
      <el-table-column prop="equipment_information" label="设备情况" width="100">
      </el-table-column>
      <el-table-column prop="scrutiny_time" label="盘查时间" width="240">
      </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="block" style="margin-top:15px;">
            <el-pagination
            @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10,20,30,40]"
              :page-size="pageSize"
               layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length">
            </el-pagination>
        </div>
    </div>
    </div>
</template>

<script>
import axios from '../../../axios'
export default {
  name: 'chakan',
  data () {
    return {
      keywords: '',
      searchBoolean: false,
      tableData: [
      ],
      currentPage: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 10// 每页的数据条数
    }
  },
  methods: {
    delay () {
      this.keywords = '',
      axios({
        url: '/dp/question/queryByBlurry',
        method: 'GET',
        params:
                {
                  wareCategory: this.keywords,
                  wareNames: this.keywords

                },
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(res => {
        // 拿到后端分页数据
        this.tableData = res.data.data
        this.searchBoolean = true
        // 拿到后端数据总条数
        this.total = parseInt(this.tableData.length)
      })
    },
    // 模糊查询分页调用共同函数
    serarch () {
      console.log(this.keywords)
      axios({
        url: '/dp/question/queryByBlurry',
        method: 'GET',
        params:
                {
                  wareCategory: this.keywords,
                  wareNames: this.keywords

                },
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }

      }).then(res => {
        // 拿到后端分页数据
        this.tableData = res.data.data
        this.searchBoolean = true
        // 拿到后端数据总条数
        /*    this.total = parseInt(res.data.data.total); */
      })
    },
    // 模糊查询
    goSearch () {
      this.currentPage = 1,
      this.serarch()
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.currentPage = 1
      this.pageSize = val
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    }
  },
  created () {
    axios({
      url: '/dp/question/query',
      method: 'get'
    }).then(res => {
      console.log(res)
      this.tableData = res.data.data
      console.log(this.tableData)
    }).catch(err => {
      console.log(err.response)
      this.$alert(err.response.data.msg, '请联系管理员', {
        confirmButtonText: '确定',
        callback: action => {

        }
      })
    })
  }
}
</script>
<style lang="less" >
 .clean1{
   width: 1200px;
    margin: 20px auto;
    display: flex;
    position: relative;
.check4 {
  height: 620px;
  overflow: hidden;
  margin-left: 45px;
   .cell
{
  font-weight: bold;
  font-size: 20px;
  color: rgb(61, 59, 59);
}
.el-pagination{
  .el-pagination__total{
  font-weight: bold;
  font-size: 20px;
  color: rgb(61, 59, 59);
}
.el-input__inner{
  font-weight: bold;
  font-size: 20px;
  color:rgb(61, 59, 59);
}
.button{
  font-weight: bold;
  font-size: 20px;
  color:rgb(61, 59, 59);
}
.el-pager
.number{
  font-weight: bold;
  font-size: 20px;

}
.el-pagination__jump{
  font-weight: bold;
  font-size: 20px;
  color: rgb(61, 59, 59);
}
}

    .searchArea {
      float: left;
      margin-top: 30px;
      margin-right: 100px;

      .searchForm {
        overflow: hidden;
        margin-right: 500px;

        input {
          box-sizing: border-box;
          width: 300px;
          height: 38px;
          padding: 0px 4px;
          border: 2px solid rgb(8, 138, 8);
          float: left;

          &:focus {
            outline: none;
          }
        }

        button {
          height: 38px;
          width: 68px;
          background-color: #0f778a;
          border: none;
          color: #fff;
          float: left;
          cursor: pointer;

          &:focus {
            outline: none;
          }
        }
      }

    }
     .table3{
           width: 1100px!important;
       }

 }
 }
</style>
